.loading_box {
  position: relative;
  margin: 100px auto;
  width: 500px;
  height: 500px;
}
.loading_box_body {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  animation: topBottom 2.5s infinite ease-in-out;
}
.loading_box_leftHand {
  position: absolute;
  top: 35%;
  left: -5%;
  animation: leftHandTopBottom 2.5s infinite ease-in-out;
}
.loading_box_rightHand {
}
.loading_box_right_bigHandwrapper {
  position: absolute;
  right: 70px;
  top: 5px;
}
.loading_box_right_bigHand {
  transform-origin: right center;
  animation: loading_box_right_bigHand 1s infinite ease-in-out;
}
.loading_box_bottom_wrapper {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.circle {
  width: 85px;
  height: 15px;
  border-radius: 50%;
  background-color:#74f8a9;
  /* ccfde0 */
  animation: circleOpacity 2.5s infinite ease-in-out;
}
.lineCircle {
  position: absolute;
  left: 0;
  bottom: -15px;
  transform-origin: -50% -50%;
  width: 60px;
  height: 8px;
  border-radius: 10px;
  background-color: #0af491;
  transform-style: preserve-3d;
  /* transform:rotate3d(0,0,1, 360deg); */
  animation: lineCircleRotates 2s linear infinite;
}
.circleFive,
.circleFour,
.circleThree,
.circleTwo,
.circleOne {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background-color: #ccfde0;
}
.circleOne {
  width: 15px;
  height: 15px;
  left: 10%;
  animation: circleOpacityOne 1.5s infinite ease-in-out;
  transition-delay: .5s;
}
.circleTwo {
  width: 18px;
  height: 18px;
  left: 30%;
  animation: circleOpacityTwo 2s infinite ease-in;
  transition-delay: 1s;
}
.circleThree {
  width: 25px;
  height: 25px;
  left: 50%;
  animation: circleOpacityThree 3.5s infinite linear;
}
.circleFour {
  width: 12px;
  height: 12px;
  right: 30%;
  animation: circleOpacityFour 3s infinite ease-out;
}
.circleFive {
  width: 20px;
  height: 20px;
  right: 10%;
  animation: circleOpacityFive 2.5s infinite linear;
}
.loading_box_body_circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 35%;
}
.loading_box_body_eye {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
  width: 200px;
  height: 200px;
}
.loading_box_body_eye_wrapper {
  width: 100%;
  height: 100%;
}
.left_eye {
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  opacity: 0;
  animation: moveLeft 10s linear infinite,opacitysMouth 10s linear infinite;
}
.right_eye {
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  opacity: 0;
  animation: moveRight 10s linear infinite,opacitysMouth 10s linear infinite;
}
.center_mouth {
  width: 44px;
  height: 18px;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: opacitysMouth 10s linear infinite;
}
.loading_box_rightHand_bottom {
  right: -55px;
  bottom: 125px;
  transform-origin: right top;
  transform: rotate(45deg) translate(0px, 0px);
  animation: rightHandBottom 10s linear infinite,rightHandsOpacity 10s linear infinite;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.loading_box_rightHand_TopWrapper {
  width: 80px;
  height: 80px;
  right: -6%;
  top: 22%;
  transform-origin: right top;
  animation: rightHandTopBottom 10s infinite ease-in-out;
}
.circle_svg #ellipsePath {
  fill: none;
  stroke: #0af491;
  stroke-width: 10;
  stroke-dasharray: 50, 320;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dashBottom 1.5s linear infinite;
}
/* 头 start */
@keyframes topBottom {
  0% {
    transform: translate(-50%, 25px);
  }
  50% {
    transform: translate(-50%, 125px);
  }
  100% {
    transform: translate(-50%, 25px);
  }
}
/* 头 end */
/* 左右手动画 start */
@keyframes leftHandTopBottom {
  0% {
    transform: translate(0, 25px);
  }
  50% {
    transform: translate(0, 125px) rotate(30deg);
  }
  100% {
    transform: translate(0, 25px) rotate(0deg);
  }
}
@keyframes rightHandTopBottom {
  0% {
    transform: translate(0, 25px);
  }
  12.5% {
    transform: translate(0, 125px);
  }
  25% {
    transform: translate(0, 25px);
  }
  37.5% {
    transform: translate(0, 125px);
  }
  50% {
    transform: translate(0, 25px);
  }
  62.5% {
    transform: translate(0, 125px);
  }
  75% {
    opacity: 1;
    transform: translate(0, 25px);
  }
  80% {
    opacity: 0;
    transform: translate(0, 125px);
  }
  95% {
    opacity: 0;
    transform: translate(0, 125px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 25px) rotate(0);
  }
}
@keyframes loading_box_right_bigHandwrapper {
  0% {
    transform: translate(0, 25px);
  }
  12.5% {
    transform: translate(0, 125px);
  }
  25% {
    transform: translate(0, 25px);
  }
  37.5% {
    transform: translate(0, 125px);
  }
  50% {
    transform: translate(0, 25px);
  }
  62.5% {
    transform: translate(0, 125px);
  }
  75% {
    opacity: 1;
    transform: translate(0, 25px);
  }
  87.5% {
    opacity: 0;
    transform: translate(0, 190px);
  }
  100% {
    transform: translate(0, 25px);
  }
}
@keyframes loading_box_right_bigHand {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(15deg);
  }
}
@keyframes rightHandBottom {
  75% {
    transform: rotate(45deg) translate(0px, 0px);
  }
  80% {
    transform: rotate(0deg);
  }
  95% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -25px) rotate(45deg);
  }
}
@keyframes rightHandsOpacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 左右手动画 end */
@keyframes rotateZ {
  from {
      transform: rotateZ(0deg);
  }
  to {
      transform: rotateZ(360deg);
  }
}

/* 气球升空动画 start */
@keyframes circleOpacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes circleOpacityOne {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes circleOpacityTwo {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes circleOpacityThree {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes circleOpacityFour {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes circleOpacityFive {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}
/* 气球升空动画 end */

/* 中间圆圈动画 start  */
/* .loading_box_body_circle svg {
  width: 3.75em;
  transform-origin: center;
  animation: rotate 2s linear infinite,opacitysCircle 10s linear infinite;
}

.loading_box_body_circle circle {
  fill: none;
  stroke: #0af491;
  stroke-width: 10;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
} */
.loading_box_body_circle .circle_loading {
  width: 50px;
  height: 50px;
  border: 15px solid transparent;
  border-right-color: rgba(10,244,145, 1);
  border-bottom-color: rgba(10,244,145, 1);
  border-radius: 50%;
  animation: rotation 1s linear infinite,opacitysCircle 10s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -125px;
  }
}

/* 中间圆圈动画 end  */
@keyframes dashBottom {
  0% {
    stroke-dashoffset: 0;
  }
  20% {
    stroke-dashoffset: 74px;
  }
  40% {
    stroke-dashoffset: 148px;
  }
  60% {
    stroke-dashoffset: 222px;
  }
  80% {
    stroke-dashoffset: 296px;
  }
  100% {
    stroke-dashoffset: 370px;
  }
}
/* 眼睛 start */
@keyframes moveLeft {
  75% {
    transform: translateX(-50%);
  }
  80% {
    transform: translateX(-100px);
  }
  95% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes moveRight {
  75% {
    transform: translateX(-50%);
  }
  80% {
    transform: translateX(50px);
  }
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes opacitysCircle {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacitysMouth {
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 眼睛 end */
/* 头部铃铛 start */
.loading_box_body_top {
  left: calc(50% - 25px);
  top: -77px;
  transform-origin: center bottom;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: rotateTop 2s ease-in-out infinite;
}
.loading_box_body_top .circle {
  width: 50px;
  height: 50px;
  background-color: #0af491;
  animation: changeColor 2s linear infinite;
}
.loading_box_body_top .rect {
  width: 3px;
  height: 30px;
  background-color: #9a9a9a;
}
/* .loading_box_body_top circle {
  fill: #0af491;
  animation: changeColor 2s linear infinite;
} */
@keyframes rotateTop {
  0% {
    transform: rotate(45deg);
  }
  10% {
    transform: rotate(30deg);
  }
  20% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  60% {
    transform: rotate(-30deg);
  }
  70% {
    transform: rotate(-15deg);
  }
  80% {
    transform: rotate(15deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes changeColor {
  0% {
    background-color: #0af491;
  }
  10% {
    background-color: #75f9c0;
  }
  20% {
    background-color: #dcfd8a;
  }
  20% {
    background-color: #d8fc8c;
  }
  30% {
    background-color: #c0fd94;
  }
  40% {
    background-color: #acfb9a;
  }
  50% {
    background-color: #93fba2;
  }
  60% {
    background-color: #81faa8;
  }
  70% {
    background-color: #77fbac;
  }
  80% {
    background-color: #89fba6;
  }
  90% {
    background-color: #9bfca0;
  }
  100% {
    background-color: #eafd85;
  }
}
/* 头部铃铛 end */

/* 底部转圈 start */
.bottom_wrapper_rotate {
  position: absolute;
  left: 50%;
  bottom: -45px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
}
.bottom_wrapper_rotate_wrapper {
  transform: rotateX(75deg) translate(0px, 80px);
}
.bottom_wrapper_rotate_circle {
  width: 150px;
  height: 150px;
  border: 5px solid transparent;
  border-right-color: rgba(10,244,145, 1);
  border-radius: 50%;
  animation: rotation 1s linear infinite;
}
@keyframes lineCircleRotates {
  /* 0% {
    transform: rotate3d(0,0,1,0);
  }
  50% {
    transform: rotate3d(0,0,1, 360deg);
  } */
}
/* 底部转圈 end */